<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bootstrap第7、8章</title>
		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<style>
			body{
				background-color: darkseagreen;
			}
			h1{
				color: white;
			}
			h2{
				color: brown;
			}
			h3{
				color: cornflowerblue;
			}
			pre{
				max-height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h1>第7章、其它内置组件</h1>
			<h2>1缩略图</h2>
			<h3>1.1缩略图一</h3>
			<p class="lead">缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过<span class="text-danger">“thumbnail”</span>样式配合<span class="text-danger">bootstrap的网格系统</span>来实现。可以将产品列表页变得更好看。</p>
			<ul>
				<li>☑  Sass版本：对应文件_thumbnails.scss</li>
				<li>☑  LESS版本：对应文件thumbnails.less</li>
			</ul>
			<pre>
				.thumbnail {
				  display: block;
				  padding: 4px;
				  margin-bottom: 20px;
				  line-height: 1.42857143;
				  background-color: #fff;
				  border: 1px solid #ddd;
				  border-radius: 4px;
				  -webkit-transition: all .2s ease-in-out;
				          transition: all .2s ease-in-out;
				}
				.thumbnail > img,
				.thumbnail a > img {
				  margin-right: auto;
				  margin-left: auto;
				}
				a.thumbnail:hover,
				a.thumbnail:focus,
				a.thumbnail.active {
				  border-color: #428bca;
				}
				.thumbnail .caption {
				  padding: 9px;
				  color: #333;
				}
			</pre>
		</div>
		
		<div class="container">
			<div class="row">
				<div class="col-xs-6 col-md-3">
					<a href="javascript:;" class="thumbnail">
						<img src="http://img.mukewang.com/5434eba100014fe906000338.png" alt="" style="width: 100%;"/>
					</a>
				</div>
				<div class="col-xs-6 col-md-3">
					<a href="javascript:;" class="thumbnail">
						<img src="http://img.mukewang.com/5434eba100014fe906000338.png" alt="" style="width: 100%;"/>
					</a>
				</div>
				<div class="col-xs-6 col-md-3">
					<a href="javascript:;" class="thumbnail">
						<img src="http://img.mukewang.com/5434eba100014fe906000338.png" alt="" style="width: 100%;"/>
					</a>
				</div>
				<div class="col-xs-6 col-md-3">
					<a href="javascript:;" class="thumbnail">
						<img src="http://img.mukewang.com/5434eba100014fe906000338.png" alt="" style="width: 100%;"/>
					</a>
				</div>
			</div>
		</div>
		
		<div class="container">
			<h3>1.2缩略图二</h3>
			<p class="lead">上一小节，展示的仅只有缩略图的一种使用方式，除了这种方式之外，还可以让缩略图配合<span class="text-danger">标题、描述内容，按钮</span>等</p>
			<p class="lead">在仅有缩略图的基础上，添加了一个div名为<span class="text-danger">“caption“</span>的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等</p>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-xs-6 col-md-3">
					<a href="javascript:;" class="thumbnail">
						<img src="http://img.mukewang.com/5434eba100014fe906000338.png" alt="" style="width: 100%;"/>
					</a>
					<div class="caption">
						<h4>Bootstrap框架系列教程</h4>
						<p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
						<p>
							<a href="javascript:;" class="btn btn-primary">开始学习</a>
							<a href="javascript:;" class="btn btn-info">正在学习</a>
						</p>
					</div>
				</div>
				<div class="col-xs-6 col-md-3">
					<a href="javascript:;" class="thumbnail">
						<img src="http://img.mukewang.com/5434eba100014fe906000338.png" alt="" style="width: 100%;"/>
					</a>
					<div class="caption">
						<h4>Bootstrap框架系列教程</h4>
						<p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
						<p>
							<a href="javascript:;" class="btn btn-primary">开始学习</a>
							<a href="javascript:;" class="btn btn-info">正在学习</a>
						</p>
					</div>
				</div>
				<div class="col-xs-6 col-md-3">
					<a href="javascript:;" class="thumbnail">
						<img src="http://img.mukewang.com/5434eba100014fe906000338.png" alt="" style="width: 100%;"/>
					</a>
					<div class="caption">
						<h4>Bootstrap框架系列教程</h4>
						<p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
						<p>
							<a href="javascript:;" class="btn btn-primary">开始学习</a>
							<a href="javascript:;" class="btn btn-info">正在学习</a>
						</p>
					</div>
				</div>
				<div class="col-xs-6 col-md-3">
					<a href="javascript:;" class="thumbnail">
						<img src="http://img.mukewang.com/5434eba100014fe906000338.png" alt="" style="width: 100%;"/>
					</a>
					<div class="caption">
						<h4>Bootstrap框架系列教程</h4>
						<p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
						<p>
							<a href="javascript:;" class="btn btn-primary">开始学习</a>
							<a href="javascript:;" class="btn btn-info">正在学习</a>
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<h2>2.警示框</h2>
			<p class="lead">在网站中，网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等</p>
			<dl class="lead">
				<dt>在Bootstrap框架有一个独立的组件，实现上述的效果，这个组件被称为警示框。</dt>
				<dd>☑ LESS版本：对应的源码文件alerts.less</dd>
				<dd>☑ Sass版本：对应的源码文件_alerts.scss</dd>
			</dl>
			<h3>2.1默认警示框</h3>
			<dl class="lead">
				<dt>在默认情况之下，提供了四种不同的警示框效果</dt>
				<dd>1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加<span class="text-danger">“alert-success”</span>样式，具体呈现的是背景、边框和文本都是绿色</dd>
				<dd>2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加<span class="text-danger">“alert-info”</span>样式，具体呈现的是背景、边框和文本都是浅蓝色</dd>
				<dd>3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加<span class="text-danger">“alert-warning”</span>样式，具体呈现的是背景、边框、文本都是浅黄色</dd>
				<dd>4、错误警示框：提示用户操作错误，在“alert”样式基础上追加<span class="text-danger">“alert-danger”</span>样式，具体呈现的是背景、边框和文本都是浅红色</dd>
			</dl>
			<p class="lead">具体使用的时候，可以在类名为<span class="text-danger">“alert”</span>的div容器里放置提示信息。实现不同类型警示框，<span class="text-danger">只需要在“alert”基础上追加对应的类名</span></p>
			<p class="lead">其中“alert”样式的源码主要是设置了警示框的<span class="text-danger">背景色、边框、圆角和文字</span>颜色。另外对其内部几个元素h4、p、ul和“.alert-link”做了样式上的特殊处理</p>
			<pre>
				.alert {
				  padding: 15px;
				  margin-bottom: 20px;
				  border: 1px solid transparent;
				  border-radius: 4px;
				}
				.alert h4 {
				  margin-top: 0;
				  color: inherit;
				}
				.alert .alert-link {
				  font-weight: bold;
				}
				.alert > p,
				.alert > ul {
				  margin-bottom: 0;
				}
				.alert > p + p {
				  margin-top: 5px;
				}
			</pre>
			<p class="lead">不同类型的警示框，主要是通过“alert-success”、“alert-info”、“alert-warning”和“alert-danger”样式来实现</p>
			<pre>
				.alert-success {
				  color: #3c763d;
				  background-color: #dff0d8;
				  border-color: #d6e9c6;
				}
				.alert-success hr {
				  border-top-color: #c9e2b3;
				}
				.alert-success .alert-link {
				  color: #2b542c;
				}
				.alert-info {
				  color: #31708f;
				  background-color: #d9edf7;
				  border-color: #bce8f1;
				}
				.alert-info hr {
				  border-top-color: #a6e1ec;
				}
				.alert-info .alert-link {
				  color: #245269;
				}
				.alert-warning {
				  color: #8a6d3b;
				  background-color: #fcf8e3;
				  border-color: #faebcc;
				}
				.alert-warning hr {
				  border-top-color: #f7e1b5;
				}
				.alert-warning .alert-link {
				  color: #66512c;
				}
				.alert-danger {
				  color: #a94442;
				  background-color: #f2dede;
				  border-color: #ebccd1;
				}
				.alert-danger hr {
				  border-top-color: #e4b9c0;
				}
				.alert-danger .alert-link {
				  color: #843534;
				}	
			</pre>
			<div class="alert">仅仅alert</div>
			<div class="alert alert-success" role="alert">恭喜您操作成功</div>
			<div class="alert alert-info" role="alert">请输入正确的密码</div>
			<div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
			<div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>
			<dl class="lead">
				<dt class="text-danger">role="alert"的属性是做什么用的 </dt>
				<dd>role原来是WAI-ARIA（the Accessible Rich Internet Applications Suite），可帮助访问Web内容和Web应用有困难的用户进行访问的方法（比如用静态的(screen-reading technologies)浏览器浏览用Ajax技术制作的动态网页）， 用途是帮助残疾人，尤其是需要依靠屏幕阅读器和不能使用鼠标的用户。应用role属性可以设计出更加友好的网站应用。html5里面添加这个属性作为做辅助作用</dd>
			</dl>
			<h3>2.2可关闭的警示框</h3>
			<dl class="lead">
				<dt>只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤</dt>
				<dd>1、需要在基本警示框“alert”的基础上添加<span class="text-danger">“alert-dismissable”</span>样式</dd>
				<dd>2、在button标签中加入<span class="text-danger">class="close"</span>类，实现警示框<span class="text-danger">关闭按钮</span>的样式</dd>
				<dd>3、要确保关闭按钮元素上设置了自定义属性：<span class="text-danger">“data-dismiss="alert"”</span>（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）</dd>
			</dl>
			<pre>
				.alert-dismissable {
				  padding-right: 35px;
				}
				.alert-dismissable .close {
				  position: relative;
				  top: -2px;
				  right: -21px;
				  color: inherit;
				}
			</pre>
			<div class="alert alert-success alert-dismissable">
				<button class="close" type="button" data-dismiss="alert">&times;</button>
				恭喜您操作成功！
			</div>
			<div class="alert alert-info alert-dismissable" role="alert">
				<button class="close" type="button" data-dismiss="alert">&times;</button>
				请输入正确的密码
			</div>
			<div class="alert alert-warning alert-dismissable" role="alert">
				<button class="close" type="button" data-dismiss="alert">&times;</button>
				您已操作失败两次，还有最后一次机会
			</div>
			<div class="alert alert-danger alert-dismissable" role="alert">
				<button class="close" type="button" data-dismiss="alert">&times;</button>
				对不起，您输入的密码有误
			</div>
			<br />
			<h3>警示框的链接</h3>
			<p class="lead">有时候你可能想在警示框中加入<span class="text-danger"></span>链接地址，用来告诉用户跳到某一个地方或新的页面。而这个时候你又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个<span class="text-danger">高亮显示</span>处理。为不同类型的警示框内的链接进行了<span class="text-danger">加粗</span>处理，并且<span class="text-danger">颜色相应加深</span>。</p>
			<p class="lead"><span class="text-danger"></span></p>
			<p class="lead">Bootstrap框架是通过给警示框加的链接添加一个名为<span class="text-danger">“alert-link”</span>的类名，通过“alert-link”样式给链接提供高亮显示。</p>
			<pre>
				.alert .alert-link {
				  font-weight: bold;
				}
				/*不同类型警示框中链接的文本颜色*/
				.alert-success .alert-link {
				  color: #2b542c;
				}
				.alert-info .alert-link {
				  color: #245269;
				}
				.alert-warning .alert-link {
				  color: #66512c;
				}
				.alert-danger .alert-link {
				  color: #843534;
				}
			</pre>
			<div class="alert alert-info alert-dismissable" role="alert">
				<strong>Heads up!</strong>
				This 
				<a href="javascript:;" class="alert-link">alert needs your attention</a>
				 , but it's not super important.
				 <button class="close" data-dismiss="alert">&times;</button>
			</div>
			<br />
			<h2>3.进度条</h2>
			<p class="lead">进度条和其他独立组件一样，开发者可以根据自己的需要，选择对应的版本：</p>
			<ul class="lead">
				<li>☑ LESS版本：源码文件progress-bars.less</li>
				<li>☑ Sass版本：源码文件_progress-bars.scss</li>
			</ul>
			<p class="lead">而且Bootstrap框架为大家提供多种样式风格的进度条，供大家使用，这一小节只是给大家直观上展示了这些进度条样式，接下来几个小节中，我们将详细讲解这些进度条如何使用。</p>
			<h3>3.1基本样式</h3>
			<p class="lead">Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色</p>
			<p class="lead">Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用<span class="text-danger">“progress”</span>样式，子容器使用<span class="text-danger">“progress-bar”</span>样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。使用方法非常的简单：</p>
			<p class="lead">progress样式主要设置进度条容器的背景色，容器高度、间距等：</p>
			<pre>
				.progress {
				  height: 20px;
				  margin-bottom: 20px;
				  overflow: hidden;
				  background-color: #f5f5f5;
				  border-radius: 4px;
				  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
				          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
				}
			</pre>
			<p class="lead">而progress-bar样式在设置进度方向，重要的是设置了进度条的背景颜色和过渡效果：</p>
			<pre>
				.progress-bar {
				  float: left;
				  width: 0;
				  height: 100%;
				  font-size: 12px;
				  line-height: 20px;
				  color: #fff;
				  text-align: center;
				  background-color: #428bca;
				  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
				          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
				  -webkit-transition: width .6s ease;
				          transition: width .6s ease;
				}
			</pre>
			<dl class="lead">
				<dt>结构优化：</dt>
				<dd>虽然这样实现了基本进度条效果，但对于残障人员浏览网页有点困难，所以我们可以将结构做得更好些（语义化更友好些）</dd>
				<dd>1、role属性作用：告诉搜索引擎这个div的作用是进度条。</dd>
				<dd>2、aria-valuenow="40"属性作用：当前进度条的进度为40%。</dd>
				<dd>3、aria-valuemin="0"属性作用：进度条的最小值为0%。</dd>
				<dd>4、aria-valuemax="100"属性作用：进度条的最大值为100%。</dd>
			</dl>
			<div class="progress">
				<div class="progress-bar" style="width: 40%;"></div>
			</div>
			<br />
			<h3>3.2彩色进度条</h3>
			<ul>
				<li>☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色</li>
				<li>☑ progress-bar-success：表示成功进度条，进度条颜色为绿色</li>
				<li>☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色</li>
				<li>☑ progress-bar-danger：表示错误进度条，进度条颜色为红色</li>
			</ul>
			<pre>
				/*bootstrap.css文件第4548行～第4550行*/
				.progress-bar-success {
				  background-color: #5cb85c;
				}
				/*bootstrap.css文件第4555行～第4557行*/
				.progress-bar-info {
				  background-color: #5bc0de;
				}
				/*bootstrap.css文件第4562行～第4564行*/
				.progress-bar-warning {
				  background-color: #f0ad4e;
				}
				/*bootstrap.css文件第4569行～第4571行*/
				.progress-bar-danger {
				  background-color: #d9534f;
				}
			</pre>
			<div class="progress">
				<div class="progress-bar" style="width: 40%;"></div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-success" style="width: 80%;"></div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-info" style="width: 20%;"></div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-warning" style="width: 50%;"></div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-danger" style="width: 60%;"></div>
			</div>
			<br />
			<h3>3.3条纹进度条</h3>
			<p class="lead">在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用CSS3的线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名<span class="text-danger">“progress-striped”</span>，当然，如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，你只需要在进度条上增加相应的颜色类名，如前面的彩色进度条所讲。</p>
			<p class="lead">正如前面所说，实现条纹进度条，主要使用的是CSS3的线性渐变，其具体代码如下：</p>
			<pre>
				.progress-striped .progress-bar {
					background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
					background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
					background-size: 40px 40px;
				}
			</pre>
			<p class="lead">同样的，条纹进度条对应的每种状态也有不同的颜色，使用方法与彩色进度条一样。只是样式上做了一定的调整：</p>
			<pre>
				.progress-striped .progress-bar-success {
				  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
				  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
				}
				/*bootstrap.css文件第4558行～第4561行*/
				.progress-striped .progress-bar-info {
				  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
				  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
				}
				/*bootstrap.css文件第4565行～第4568行*/
				.progress-striped .progress-bar-warning {
				  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
				  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
				}
				/*bootstrap.css文件第4572行～第4575行*/
				.progress-striped .progress-bar-danger {
				  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
				  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
				}
			</pre>
			<div class="progress progress-striped">
				<div class="progress-bar progress-bar-danger" style="width: 40%;"></div>
			</div>
			<div class="progress progress-striped">
				<div class="progress-bar progress-bar-info" style="width: 40%;"></div>
			</div>
			<div class="progress progress-striped">
				<div class="progress-bar progress-bar-success" style="width: 40%;"></div>
			</div>
			<div class="progress progress-striped">
				<div class="progress-bar progress-bar-warning" style="width: 40%;"></div>
			</div>
			<br />
			<h3>3.4动态条纹进度条</h3>
			<p class="lead">在进度条“progress progress-striped”两个类的基础上再加入<span class="text-danger">“active”</span>类名</p>
			<p class="lead">为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片。</p>
			<pre>
				@-webkit-keyframes progress-bar-stripes {
				  from {
				    background-position: 40px 0;
				  }
				  to {
				    background-position: 0 0;
				  }
				}
				@keyframes progress-bar-stripes {
				  from {
				    background-position: 40px 0;
				  }
				  to {
				    background-position: 0 0;
				  }
				}

			</pre>
			<p class="lead">了解CSS3的同学都知道，@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画“progress-bar-stripes”，并且通过一个事件触发动画生效。在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效。</p>
			<pre>
				.progress.active .progress-bar {
				  -webkit-animation: progress-bar-stripes 2s linear infinite;
				          animation: progress-bar-stripes 2s linear infinite;
				}
			</pre>
			<div class="progress progress-striped active">
				<div class="progress-bar progress-bar-danger" style="width: 40%;"></div>
			</div>
			<div class="progress progress-striped active">
				<div class="progress-bar progress-bar-info" style="width: 40%;"></div>
			</div>
			<div class="progress progress-striped active">
				<div class="progress-bar progress-bar-success" style="width: 40%;"></div>
			</div>
			<div class="progress progress-striped active">
				<div class="progress-bar progress-bar-warning" style="width: 40%;"></div>
			</div>
			<p class="lead"><span class="text-danger">特别注意：</span>要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果。</p>
			<br />
			<h3>3.5层叠进度条</h3>
			<p class="lead">Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列</p>
			<p class="lead">或许你会感到疑问，没有为层叠进度条添加额外的样式代码，怎么就正常了呢？可以回过头来看基本进度条那部分，不难发现，在“progress-bar”上有一个左浮动的样式。也就是这个样式，在不增加任何样式代码就能实现上例的层叠效果。当然有一点需要注意，层叠进度条宽度之和不能大于100%，大于100%就会造成下面的不良效果</p>
			<p class="lead">除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%</p>
			<div class="progress">
				<div class="progress-bar progress-bar-success" style="width:20%"></div>
			    <div class="progress-bar progress-bar-info" style="width:10%"></div>
			    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
			    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
			</div> 
			<div class="progress active">
				<div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
				<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
				<div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
				<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
			</div> 
			<br />
			<h3>3.6带Label的进度条</h3>
			<p class="lead">还有一种特殊情形，当进度条处于开始位置，也就是进度条的值为0%时，内容是否会撑开一定的宽度，让进度条具有颜色呢？如果是，这不是我们需要的效果，如果不是，又是怎么实现的呢？</p>
			<p class="lead">效果告诉我们，当进度为0%，进度条颜色并没有显示出来，那是因为Bootstrap在样式上做了一定的处理。</p>
			<pre>
				.progress-bar[aria-valuenow="1"],
				.progress-bar[aria-valuenow="2"] {
				  min-width: 30px;
				}
				.progress-bar[aria-valuenow="0"] {
				  min-width: 30px;
				  color: #777;
				  background-color: transparent;
				  background-image: none;
				  -webkit-box-shadow: none;
				          box-shadow: none;
				}
			</pre>
			<p class="lead"><span class="text-danger">注：</span>这段代码BootstrapV3.2版本才有。在Bootstrap V3.1.1版本是不具有这段代码，同时也说明，Bootstrap在不断的完善之中。</p>
			<div class="progress">
			    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>  
			</div>  
			<div class="progress">
				<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"   style="width:2%">1%</div>
			</div>
			<p class="lead text-danger">width和min-width样式并不冲突，不会覆盖</p>
			<br />
			<h2>4媒体对象</h2>
			<p class="lead">在Web页面或者说移动页面制作中，常常看到这样的效果，左边居左（或居右），内容居右（或居左）排列</p>
			<p class="lead">我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式，可以用来构建不同类型的组件。这些组件都具有开篇所说的样式风格。那么在Bootstrap框架中特意将些部分提取出来做来一个组件介绍。其对应的版本文件：</p>
			<ul class="lead">
				<li>☑ LESS版本：对应的源文件是media.less</li>
				<li>☑ Sass版本：对应的源文件是_media.scss</li>
			</ul>
			<br />
			<h3>4.1默认媒体对象</h3>
			<dl class="lead">
				<dt>媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：</dt>
				<dd>☑  媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容</dd>
				<dd>☑  媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片</dd>
				<dd>☑  媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容</dd>
				<dd>☑  媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选</dd>
			</dl>
			<p class="lead">除了上面四个部分之外，在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。</p>
			<p class="lead">媒体对象样式相对来说比较简单，只是设置他们之间的间距</p>
			<pre>
				.media,
				.media-body {
				  overflow: hidden;
				  zoom: 1;
				}
				.media,
				.media .media {
				  margin-top: 15px;
				}
				.media:first-child {
				  margin-top: 0;
				}
				.media-object {
				  display: block;
				}
				.media-heading {
				  margin: 0 0 5px;
				}
				.media > .pull-left {
				  margin-right: 10px;
				}
				.media > .pull-right {
				  margin-left: 10px;
				}
			</pre>
			<div class="media">
				<a href="javascript:;" class="pull-left">
					<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="" />
				</a>
				<div class="media-body">
					<h4 class="media-heading">系列：十天精通CSS3</h4>
					<div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
				</div>
			</div>
			<br />
			<h3>4.2媒体对象的嵌套</h3>
			<div class="media">
				<a href="javascript:;" class="pull-left">
					<img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031"/>
				</a>
				<div class="media-body">
					<h4 class="media-heading">我是大漠</h4>
					<div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
					<div class="media">
						<a href="javascript:;" class="pull-left">
							<img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
						</a>
						<div class="media-body">
							<h4 class="media-heading">慕课网</h4>
							<div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
							<div class="media">
								<a class="pull-left" href="#">
									<img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
								</a>
								<div class="media-body">
									<h4 class="media-heading">W3cplus</h4>
									<div>W3cplus站上还有很多教程....</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<br />
			<h3>4.3媒体对象列表</h3>
			<p class="lead">媒体对象的嵌套仅是媒体对象中一个简单应用效果之一，在很多时候，我们还会碰到一个列表，每个列表项都和媒体对象长得差不多，同样用评论系统来说事：</p>
			<p class="lead">针对上图的媒体对象列表效果，Bootstrap框架提供了一个列表展示的效果，在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”</p>
			<ul class="media-list">
				<li class="media">
					<a href="javascript:;" class="pull-left">
						<img src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" class="media-object" />
					</a>
					<div class="media-body">
						<h4 class="media-heading">我是大漠</h4>
						<div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
					</div>
				</li>
				<li class="media">
					<a href="javascript:;" class="pull-left">
						<img src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" class="media-object" />
					</a>
					<div class="media-body">
						<h4 class="media-heading">慕课网</h4>
						<div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
					</div>
				</li>
				<li class="media">
					<a href="javascript:;" class="pull-left">
						<img src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" class="media-object" />
					</a>
					<div class="media-body">
						<h4 class="media-heading">W3cplus</h4>
						<div>W3cplus站上还有很多教程....</div>
					</div>
				</li>
			</ul>
			<p class="lead">媒体对象列表，在样式上也并没有做过多的特殊处理，只是把列表的左间距置０以及去掉了项目列表符号：</p>
			<pre>
				.media-list {
				  padding-left: 0;
				  list-style: none;
				}
			</pre>
			<br />
			<h3>5.列表组</h3>
			<p class="lead">列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件，所以也对应有自己独立源码</p>
			<ul>
				<li>☑  LESS版本：对应的源码文件 list-group.less</li>
				<li>☑   Sass版本：对应的源码文件是 _list-group.scss</li>
			</ul>
			<br />
			<h3>5.1基础列表组</h3>
			<p class="lead">基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式</p>
			<ul>
				<li>☑  list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素</li>
				<li>☑  list-group-item：列表项，常用的是li元素，当然也可以是div元素</li>
			</ul>
			<p class="lead">对于基础列表组并没有做过多的样式设置，主要设置了其间距，边框和圆角等</p>
			<pre>
				.list-group {
				  padding-left: 0;
				  margin-bottom: 20px;
				}
				.list-group-item {
				  position: relative;
				  display: block;
				  padding: 10px 15px;
				  margin-bottom: -1px;
				  background-color: #fff;
				  border: 1px solid #ddd;
				}
				.list-group-item:first-child {
				  border-top-left-radius: 4px;
				  border-top-right-radius: 4px;
				}
				.list-group-item:last-child {
				  margin-bottom: 0;
				  border-bottom-right-radius: 4px;
				  border-bottom-left-radius: 4px;
				}
			</pre>
			<ul class="list-group">
				<li class="list-group-item">揭开CSS3的面纱</li>
				<li class="list-group-item">CSS3选择器</li>
				<li class="list-group-item">CSS3边框</li>
				<li class="list-group-item">CSS3背景</li>
				<li class="list-group-item">CSS3文本</li>
			</ul>
			<br />
			<h3>5.2带徽章的列表组</h3>
			<p class="lead">带徽章的列表组其实就是将Bootstrap框架中的<span class="text-danger">徽章组件</span>和<span class="text-danger">基础列表组</span>结合在一起的一个效果。具体做法很简单，只需要在“list-group-item”中添加徽章组件<span class="text-danger">“badge”</span></p>
			<p class="lead">实现效果非常简单，就是给徽章设置了一个<span class="text-danger">右浮动</span>，当然如果有两个徽章同时在一个列表项中出现时，还设置了他们之间的距离</p>
			<pre>
				.list-group-item > .badge {
				  float: right;
				}
				.list-group-item > .badge + .badge {
				  margin-right: 5px;
				}
			</pre>
			<ul class="list-group">
				<li class="list-group-item">
					<span class="badge">13</span>揭开CSS3的面
				</li>
				<li class="list-group-item">
					<span class="badge">456</span>CSS3选择器
				</li>
				<li class="list-group-item">
					<span class="badge">892</span>CSS3边框
				</li>
				<li class="list-group-item">
					<span class="badge">90</span>CSS3背景
				</li>
				<li class="list-group-item">
					<span class="badge">1290</span>CSS3文本
				</li>
			</ul>
			<br />
			<h3>5.3带链接的列表组</h3>
			<p class="lead">带链接的列表组，其实就是每个列表项都具有链接效果。大家可能最初想到的就是在基础列表组的基础上，给列表项的文本添加链接</p>
			<ul class="list-group">
				<li class="list-group-item"><a href="javascript:;">揭开CSS3的面</a></li>
				<li class="list-group-item"><a href="javascript:;">CSS3选择器</a></li>
				<li class="list-group-item"><a href="javascript:;">CSS3边框</a></li>
				<li class="list-group-item"><a href="javascript:;">CSS3背景</a></li>
				<li class="list-group-item"><a href="javascript:;">CSS3文本</a></li>
			</ul>
			<p class="lead">这样做有一个不足之处，就是链接的点击区域只在文本上有效</p>
			<p class="lead">但很多时候，都希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式：“display:block”</p>
			<p class="lead">虽然这样能解决问题，达到需求。但在Bootstrap框架中，还是采用了另一种实现方式。就是将ul.list-group使用<span class="text-danger">div.list-group</span>来替换，而li.list-group-item直接用<span class="text-danger">a.list-group-item</span>来替换。这样就可以达到需要的效果：</p>
			<div class="list-group">
				<a href="javascript:;" class="list-group-item">CSS3选择器</a>
				<a href="javascript:;" class="list-group-item">CSS3边框</a>
				<a href="javascript:;" class="list-group-item">CSS3背景</a>
			</div>
			<p class="lead">如果使用a.list-group-item时，在样式需要做一定的处理，比如说<span class="text-danger">去文本下划线，增加悬浮效果</span>等</p>
			<pre>
				a.list-group-item {
				  color: #555;
				}
				a.list-group-item .list-group-item-heading {
				  color: #333;
				}
				a.list-group-item:hover,
				a.list-group-item:focus {
				  color: #555;
				  text-decoration: none;
				  background-color: #f5f5f5;
				}
			</pre>
			<br />
			<h3>5.4自定义列表组</h3>
			<p class="lead">Bootstrap框加在链接列表组的基础上新增了两个样式</p>
			<ul class="lead">
				<li>☑  list-group-item-heading：用来定义列表项头部样式</li>
				<li>☑  list-group-item-text：用来定义列表项主要内容</li>
			</ul>
			<p class="lead">这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容</p>
			<pre>
				a.list-group-item .list-group-item-heading {
				  color: #333;
				}
				/*bootstrap文件第4865行～第4874行*/
				.list-group-item.disabled .list-group-item-heading,
				.list-group-item.disabled:hover .list-group-item-heading,
				.list-group-item.disabled:focus .list-group-item-heading {
				  color: inherit;
				}
				.list-group-item.disabled .list-group-item-text,
				.list-group-item.disabled:hover .list-group-item-text,
				.list-group-item.disabled:focus .list-group-item-text {
				  color: #777;
				}
				/*bootstrap.css文件第4883行～第4898行*/
				.list-group-item.active .list-group-item-heading,
				.list-group-item.active:hover .list-group-item-heading,
				.list-group-item.active:focus .list-group-item-heading,
				.list-group-item.active .list-group-item-heading > small,
				.list-group-item.active:hover .list-group-item-heading > small,
				.list-group-item.active:focus .list-group-item-heading > small,
				.list-group-item.active .list-group-item-heading > .small,
				.list-group-item.active:hover .list-group-item-heading > .small,
				.list-group-item.active:focus .list-group-item-heading > .small {
				  color: inherit;
				}
				.list-group-item.active .list-group-item-text,
				.list-group-item.active:hover .list-group-item-text,
				.list-group-item.active:focus .list-group-item-text {
				  color: #e1edf7;
				}
				/*bootstrap.css文件第4987行～第4994行*/
				.list-group-item-heading {
				  margin-top: 0;
				  margin-bottom: 5px;
				}
				.list-group-item-text {
				  margin-bottom: 0;
				  line-height: 1.3;
				}
			</pre>
			<div class="list-group">
				<a href="javascript:;" class="list-group-item">
					<h4 class="list-group-item-heading">图解CSS3</h4>
					<p class="list-group-item-text">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>
				</a>
				<a href="##" class="list-group-item">
					<h4 class="list-group-item-heading">Sass中国</h4>
					<p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>
				</a>
			</div>
			<br />
			<h3>列表项的状态设置</h3>
			<p class="lead">Bootstrap框架也给组合列表项提供了<span class="text-danger">状态效果</span>，特别是链接列表组。比如常见状态和禁用状态等。实现方法和前面介绍的组件类似，在列表组中只需要在对应的列表项中添加类名</p>
			<ul class="lead">
				<li>☑  active：表示当前状态</li>
				<li>☑  disabled：表示禁用状态</li>
			</ul>
			<p class="lead">在样式上主要对列表项的背景色和文本做了样式设置</p>
			<pre>
				.list-group-item.disabled,
				.list-group-item.disabled:hover,
				.list-group-item.disabled:focus {
				  color: #777;
				  background-color: #eee;
				}
				/*bootstrap.css文件第4875行～第4882行*/
				.list-group-item.active,
				.list-group-item.active:hover,
				.list-group-item.active:focus {
				  z-index: 2;
				  color: #fff;
				  background-color: #428bca;
				  border-color: #428bca;
				}
			</pre>
			<div class="list-group">
				<a href="javascript:;" class="list-group-item"><span class="badge">434</span>图解CSS3</a>
				<a href="javascript:;" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
				<a href="javascript:;" class="list-group-item"><span class="badge">87</span>图解CSS3</a>
			</div>
			<br />
			<h3>5.5多彩列表组</h3>
			<dl class="lead">
				<dt>列表组组件和警告组件一样，Bootstrap为不同的状态提供了不同的背景颜色和文本色，可以使用这几个类名定义不同背景色的列表项</dt>
				<dd>☑  <span class="text-danger">list-group-item-success：</span>成功，背景色绿色</dd>
				<dd>☑  <span class="text-danger">list-group-item-info：</span>信息，背景色蓝色</dd>
				<dd>☑  <span class="text-danger">list-group-item-warning：</span>警告，背景色为黄色</dd>
				<dd>☑  <span class="text-danger">list-group-item-danger：</span>错误，背景色为红色</dd>
			</dl>
			<p class="lead">如果你想给列表项添加什么背景色，只需要在“list-group-item”基础上增加对应的类名</p>
			<p class="lead">同样的，这几个类名仅修改了背景色和文本色</p>
			<pre>
				.list-group-item-success {
				  color: #3c763d;
				  background-color: #dff0d8;
				}
				a.list-group-item-success {
				  color: #3c763d;
				}
				a.list-group-item-success .list-group-item-heading {
				  color: inherit;
				}
				a.list-group-item-success:hover,
				a.list-group-item-success:focus {
				  color: #3c763d;
				  background-color: #d0e9c6;
				}
				a.list-group-item-success.active,
				a.list-group-item-success.active:hover,
				a.list-group-item-success.active:focus {
				  color: #fff;
				  background-color: #3c763d;
				  border-color: #3c763d;
				}
			</pre>
			<div class="list-group">
				<a href="javascript:;" class="list-group-item list-group-item-success">
					<span class="badge">23</span>
					图解CSS3
				</a>
				<a href="javascript:;" class="list-group-item list-group-item-info">
					<span class="badge">23</span>
					图解CSS3
				</a>
				<a href="javascript:;" class="list-group-item list-group-item-warning">
					<span class="badge">23</span>
					图解CSS3
				</a>
				<a href="javascript:;" class="list-group-item list-group-item-danger">
					<span class="badge">23</span>
					图解CSS3
				</a>
				<a href="javascript:;" class="list-group-item">
					<span class="badge">23</span>
					图解CSS3
				</a>
			</div>
			<div class="list-group">
				<a href="javascript:;" class="list-group-item list-group-item-success active">
					<span class="badge">23</span>
					图解CSS3
				</a>
				<a href="javascript:;" class="list-group-item list-group-item-info active">
					<span class="badge">23</span>
					图解CSS3
				</a>
				<a href="javascript:;" class="list-group-item list-group-item-warning active">
					<span class="badge">23</span>
					图解CSS3
				</a>
				<a href="javascript:;" class="list-group-item list-group-item-danger active">
					<span class="badge">23</span>
					图解CSS3
				</a>
				<a href="javascript:;" class="list-group-item active">
					<span class="badge">23</span>
					图解CSS3
				</a>
			</div>
			<br />
			<h2>6.面板</h2>
			<p class="lead">面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码</p>
			<ul class="lead">
				<li>☑  Less版本：对应的源码文件是<span class="text-danger"> panels.less</span></li>
				<li>☑  Sass版本：对应的源码文件是<span class="text-danger"> _panels.scss</span></li>
			</ul>
			<br />
			<h3>6.1基础面板</h3>
			<p class="lead">基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容</p>
			<p class="lead">“panel“主要对边框，间距和圆角做了一定的设置：</p>
			<pre>
				.panel {
				  margin-bottom: 20px;
				  background-color: #fff;
				  border: 1px solid transparent;
				  border-radius: 4px;
				  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
				          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
				}
				.panel-body {
				  padding: 15px;
				}
			</pre>
			<div class="panel panel-default">
				<div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
			</div>
			<br />
			<h3>6.2带有头和尾的面板</h3>
			<p class="lead">基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加<span class="text-danger">“面板头部”</span>和<span class="text-danger">“页面尾部”</span>的效果</p>
			<ul class="lead">
				<li>☑ panel-heading：用来设置面板头部样式</li>
				<li>☑ panel-footer：用来设置面板尾部样式</li>
			</ul>
			<p class="lead">panel-heading和panel-footer也仅仅间距和圆角等样式进行了设置</p>
			<pre>
				.panel-heading {
				  padding: 10px 15px;
				  border-bottom: 1px solid transparent;
				  border-top-left-radius: 3px;
				  border-top-right-radius: 3px;
				}
				.panel-heading > .dropdown .dropdown-toggle {
				  color: inherit;
				}
				.panel-title {
				  margin-top: 0;
				  margin-bottom: 0;
				  font-size: 16px;
				  color: inherit;
				}
				.panel-title > a {
				  color: inherit;
				}
				.panel-footer {
				  padding: 10px 15px;
				  background-color: #f5f5f5;
				  border-top: 1px solid #ddd;
				  border-bottom-right-radius: 3px;
				  border-bottom-left-radius: 3px;
				}
			</pre>
			<div class="panel panel-default">
				<div class="panel-heading">heading</div>
				<div class="panel-body">
					<p>body</p>
					<p>body</p>
					<p>body</p>
				</div>
				<div class="panel-footer">footer</div>
			</div>
			<br />
			<h3>6.3彩色面板</h3>
			<ul class="lead">
				<li><span class="text-danger">☑  panel-primary：</span>重点蓝</li>
				<li><span class="text-danger">☑  panel-success：</span>成功绿</li>
				<li><span class="text-danger">☑ panel-info：</span>信息蓝</li>
				<li><span class="text-danger">☑ panel-warning：</span>警告黄</li>
				<li><span class="text-danger">☑ panel-danger：</span>危险红</li>
			</ul>
			<p class="lead">使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名</p>
			<p class="lead">从效果中不难发现，这几个样式只是改变了面板的背景色、文本和边框颜色</p>
			</div>
		<div class="container">
			<div class="row">
				<div class="col-lg-4">
					<div class="panel panel-primary">
						<div class="panel-heading">图解CSS3</div>
						<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
						<div class="panel-footer">作者：大漠</div>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="panel panel-info">
						<div class="panel-heading">图解CSS3</div>
						<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
						<div class="panel-footer">作者：大漠</div>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="panel panel-warning">
						<div class="panel-heading">图解CSS3</div>
						<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
						<div class="panel-footer">作者：大漠</div>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="panel panel-success">
						<div class="panel-heading">图解CSS3</div>
						<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
						<div class="panel-footer">作者：大漠</div>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="panel panel-danger">
						<div class="panel-heading">图解CSS3</div>
						<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
						<div class="panel-footer">作者：大漠</div>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="panel panel-default">
						<div class="panel-heading">图解CSS3</div>
						<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
						<div class="panel-footer">作者：大漠</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<br />
			<h3>6.4面板中嵌套表格</h3>
			<p class="lead">一般情况下可以把面板理解为一个区域，在使用面板的时候，都会在panel-body放置需要的内容，可能是<span class="text-danger">图片</span>、<span class="text-danger">表格</span>或者<span class="text-danger">列表</span>等</p>
			<div class="panel panel-primary">
				<div class="panel-heading">图解CSS3</div>
				<div class="panel-body">
					<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</p>
					<table class="table table-bordered">
						<thead>
							<tr>
								<th>＃</th>
								<th>我的书</th>
								<th>发布时间</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>《图解CSS3》</td>
								<td>2014-07-10</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="panel-footer">作者：大漠</div>
			</div>
			<dl class="lead">
				<dt>优化代码：</dt>
				<dd>在实际应用运中，你或许希望表格和面板边缘不需要有任何的间距。但由于panel-body设置了一个padding：15px的值，为了实现这样的效果</dd>
			</dl>
			<div class="panel panel-primary">
				<div class="panel-heading">图解CSS3</div>
				<div class="panel-body">
					<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</p>
				</div>
				<table class="table table-bordered">
					<thead>
						<tr class="warning">
							<th>＃</th>
							<th>我的书</th>
							<th>发布时间</th>
						</tr>
					</thead>
					<tbody>
						<tr class="success">
							<td>1</td>
							<td>《图解CSS3》</td>
							<td>2014-07-10</td>
						</tr>
					</tbody>
				</table>
				<div class="panel-footer">作者：大漠</div>
			</div>
			<p class="lead">这样的效果是不是完美多了。大家可能会问，前面介绍表格的时候table-bordered明明有边框，按理说这里应该会出现边框重叠效果才对，怎么没有呢？其实原本是有边框重叠的，只不过在面板中对表格又做了一次优化。对应的代码是bootstrap.css文件中第5054行～第5172行。</p>
			<br />
			<h3>6.5面板中嵌套列表组</h3>
			<div class="panel panel-primary">
				<div class="panel-heading">图解CSS3</div>
				<div class="panel-body">
					<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</p>
					<div class="list-group">
						<a href="javascript:;" class="list-group-item">我是列表项</a>
						<a href="javascript:;" class="list-group-item">我是列表项</a>
						<a href="javascript:;" class="list-group-item">我是列表项</a>
					</div>
				</div>
				<div class="panel-footer">作者：大漠</div>
			</div>
			<dl class="lead">
				<dt>优化代码</dt>
				<dd>和嵌套表格一样，如果你觉得这样有间距不好看，你完全可以把列表组提取出来</dd>
			</dl>
			<div class="panel panel-primary">
				<div class="panel-heading">图解CSS3</div>
				<div class="panel-body">
					<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</p>
				</div>
				<div class="list-group">
					<a href="javascript:;" class="list-group-item">我是列表项</a>
					<a href="javascript:;" class="list-group-item">我是列表项</a>
					<a href="javascript:;" class="list-group-item">我是列表项</a>
				</div>
				<div class="panel-footer">作者：大漠</div>
			</div>
			<p class="lead">同样的道理，Bootstrap将嵌套在面板中的列表组做了一定的样式优化。具体源码可以查看bootstrap.css文件第5031行～第5053行。</p>
			<br /><br /><br />
			<h1>第8章 Bootstrap支持的JavaScript插件</h1>
			<h2>1.导入JavaScript插件</h2>
			<p class="lead">Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。</p>
			<p class="lead">Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。</p>
			<dl class="lead">
				<dt>一次性导入</dt>
				<dd>Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）</dd>
			</dl>
			<dl class="lead">
				<dt>单独导入:为方便单独导入特效文件，Bootstrap V3.2中提供了12种JavaScript插件，他们分别是</dt>
				<dd>☑ 动画过渡（Transitions）:对应的插件文件“transition.js”</dd>
				<dd>☑ 模态弹窗（Modal）:对应的插件文件“modal.js”</dd>
				<dd>☑ 下拉菜单（Dropdown）：对应的插件文件“dropdown.js”</dd>
				<dd>☑ 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”</dd>
				<dd>☑ 选项卡（Tab）：对应的插件文件“tab.js”</dd>
				<dd>☑ 提示框（Tooltips）：对应的插件文件“tooltop.js”</dd>
				<dd>☑ 弹出框（Popover）：对应的插件文件“popover.js”</dd>
				<dd>☑ 警告框（Alert）：对应的插件文件“alert.js”</dd>
				<dd>☑ 按钮（Buttons）：对应的插件文件“button.js”</dd>
				<dd>☑ 折叠/手风琴（Collapse）：对应的插件文件“collapse.js”</dd>
				<dd>☑ 图片轮播Carousel：对应的插件文件“carousel.js”</dd>
				<dd>☑ 自动定位浮标Affix：对应的插件文件“affix.js”</dd>
			</dl>
			<p class="lead"><span class="text-danger">上述单独插件的下载可到github去下载（https://github.com/twbs/bootstrap）。</span></p>
			<p class="lead">接下来依次向大家介绍这些插件如何使用，至于插件源码分析，在本系列不做过多的阐述，具体源码可以阅读各插件的代码。</p>
			<p class="lead"><span class="text-danger">注意：</span>在后面的例子中我们为了方便都采用一次性导入的方法，即引入“bootstrap.min.js”文件（小伙伴们可以在自己的项目中跟据需要选择单独导入还是一次性导入）。</p>
			<br />
			<h3>2.动画过渡（Transitions）</h3>
			<dl class="lead">
				<dt>Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法：</dt>
				<dd>☑ 调用统一编译的bootstrap.js；</dd>
				<dd>☑ 调用单一的过渡动画的JavaScript插件文件transition.js（右侧第29行引入Bootstrap上对外公布的transition.js的地址）</dd>
			</dl>
			<p class="lead">transition.js文件为Bootstrap具有过渡动画效果的组件提供了<span class="text-danger">动画过渡</span>效果。不过需要注意的是，这些过渡动画都是采用<span class="text-danger">CSS3</span>来实现的，所以<span class="text-danger">IE6-8</span>浏览器是不具备这些过渡动画效果。</p>
			<dl class="lead">
				<dt>默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：</dt>
				<dd>☑ 模态弹出窗（Modal）的滑动和渐变效果；</dd>
				<dd>☑ 选项卡（Tab）的渐变效果；</dd>
				<dd>☑ 警告框（Alert）的渐变效果；</dd>
				<dd>☑ 图片轮播（Carousel）的滑动效果。</dd>
			</dl>
			<br />
			<h3>3.模态弹出框（Modals）</h3>
			<p class="lead">这一小节我们先来讲解一个“模态弹出框”，插件的源文件：modal.js。</p>
			<dl class="lead">
				<dt>样式代码：</dt>
				<dd>☑ LESS版本：modals.less</dd>
				<dd>☑ Sass版本：_modals.scss</dd>
			</dl>
			<p class="lead">在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片</p>
			<button class="btn btn-primary" id="btn">点击我</button>
			<div class="modal" id="my">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title">模态弹出窗标题</h4>
					</div>
					<div class="modal-body">
						<p>模态弹出窗主体内容</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary">保存</button>
					</div>
				</div>
			</div>
			<br />
			<h3>3.1结构分析</h3>
			
			
			
			
			
			<p class="lead"><span class="text-danger"></span></p>
		
		</div>
			
			
			
			
		
		
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
		<script>
			//jq的$()方法只是等dom结构完成，并不等外部文件等加载解析完
			$(function(){
				$("#btn").click(function(){
					$("#my").modal("toggle");
				});
			})
		</script>
	</body>
</html>
